<template>
    <div :style="'z-index:'+props.zindex+';transform: translate('+props.x+'px, '+props.y+'px);width:'+props.width+'px;height:'+props.height+'px'" class="renderDom" ref="renderDom">

      <el-text class="text" :style="captionStyle" line-clamp="3">
        {{ text }}
         <!-- 添加停止按钮 -->
          <div @click="handleInterrupt" v-show="showStopButton&&stopBtnEnable" class="stop-button unselectable">
            <el-icon color="#409eff">
              <VideoPause/>
            </el-icon>
          </div>
      </el-text>
      <!-- 添加打断词提示 -->
     <div v-if="showInterruptTip && voiceInterruptWord&&interruptTipEnalbe" class="interrupt-tip unselectable">
      <span>你可以说"{{ voiceInterruptWord }}"来打断</span>
    </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue'
import { VideoPause } from '@element-plus/icons-vue'
import { useSceneStore } from '@/stores/scene'
import { mittTypes } from '@/util/types'

const internalInstance = getCurrentInstance()
const emitter = internalInstance.appContext.config.globalProperties.emitter
const sceneStore = useSceneStore()

// 添加响应式变量
const showStopButton = ref(false)
const stopBtnEnable = ref(false)
const showInterruptTip = ref(false)
const interruptTipEnalbe = ref(false)
const voiceInterruptWord = ref('')
const voiceInterruptWords = ref(['别说了', '我知道了'])

const props = defineProps({
  text: String,
  x: {
    type: String,
    default: '0'
  },
  y: {
    type: String,
    default: '800'
  },
  width: {
    type: String,
    default: '800'
  },
  height: {
    type: String,
    default: '100'
  },
  zindex: {
    type: String,
    default: '100'
  },
  captionStyle: {
    type: Object,
    default: null
  },
})
// 处理打断按钮点击
const handleInterrupt = () => {
    // 发送打断事件
    // emitter.emit(mittTypes.WEBHUMAN.STOP_VISEME_AUDIO)
    emitter.emit(mittTypes.CHATBOX.STOP_REPLY)
    showStopButton.value = false
    showInterruptTip.value = false
}

onMounted(() => {
  if(sceneStore.projectConfig.uiConfig.interrupt){
    stopBtnEnable.value = sceneStore.projectConfig.uiConfig.interrupt.buttonInterrupt
  }
  if(sceneStore.projectConfig.uiConfig.interrupt){
    interruptTipEnalbe.value = sceneStore.projectConfig.uiConfig.interrupt.tip
  }
  // 监听打断事件 打断按钮和打断提示同时出现
  emitter.on(mittTypes.RENDERER.SET_SHOW_INTERRUPT_TIP, (show) => {
    if(sceneStore.projectConfig.projectSet.platform != "guide"){
      showInterruptTip.value = show
    }
  })
   // 初始化打断词
    if (sceneStore.projectConfig.uiConfig.interrupt.voiceInterruptWords && sceneStore.projectConfig.uiConfig.interrupt.voiceInterruptWords.length > 0) {
      voiceInterruptWord.value = sceneStore.projectConfig.uiConfig.interrupt.voiceInterruptWords[0]
    }
  emitter.on(mittTypes.RENDERER.SET_SHOW_INTERRUPT_BUTTON, (show) => {
    showStopButton.value = show
  })
})

</script>
<script lang="ts">
export default {
  name: 'Captions'
}
</script>
<style scoped>
.renderDom {
  text-align: center;
  position:absolute;
  bottom:0px;
  top:0;
  left:0px;
  right:0px;
  margin:auto;
  width:800px;
  height: 200px;
}
.stop-button {
  position: absolute;
  bottom: 15px;
  right: 10px;
  height: 40px;
  color: #409eff;
  cursor: pointer;
  /* border: 1px solid #409eff;
  border-radius: 20px; */
  padding: 5px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: white; */
}

.interrupt-tip {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 15px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  color: #409eff;
  font-size: 14px;
  border: 1px solid #409eff;
  white-space: nowrap;
}
.text{
  width:100%;
  height:100%;
}
</style>